<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .summary {
            color: gray;
        }
    </style>
</head>

<body>
    <input type="text" name="" id=""> <button>发布</button>
    <ul>
        <li>
            <h2>标题</h2>
            <p class="summary">内容</p>
            <p>时间</p>
        </li>



    </ul>
    <script src="./09.js"></script>
    <script>
        /*
            1-  
                dom核心（抄写）
                    脑图中总结的dom 
                        查询-属性
                自己总结dom脑图
                
                

                数组-数组的常见方法 -总结成脑图
                    -去重方法--总结成脑图

                dom作业 
                    1-列表
                    2-留言板   
        
        */

        // 1 - 1 - 列表
        // 根据遍历 数组-拼接字符串--放到ul中
        console.log(arr);

        // 打印 找到我们需要的 新闻的数组
        console.log(arr.data.items);
        // 遍历items 每遍历一次 根据数组中的元素 --得到一个 li 字符串

        // 
        var str = '';// 保存循环中得到每一个 li字符串
        arr.data.items.forEach(function (v) {
            console.log(v);//v是数组中每一个元素，是一个对象 {title:'aa',summary:'aa',createAt:'aa'}
            var title = v.title;
            var summary = v.summary;
            // 日期字符串
            var createdAt = v.createdAt;
            // 处理createdAt --日期字符串--得到一个 要显示的字符串
            // 
            //根据数组中的元素 --得到一个 li 字符串
            // 先写静态页面，--最后把需要变化的部分 使用js 改变
            var liStr = `
                <li>
                    <h2>${title}</h2>
                    <p class="summary">${summary}</p>
                    <p>${createdAt}</p>
                </li> 
                `;
            // console.log(liStr);
            str += liStr;
        });
        //循环结束 得到了多个 li字符串---也就是ul中需要显示id内容
        console.log(str);

        // 获取ul
        var ul = document.querySelector("ul");
        //设置ul的内容
        ul.innerHTML = str;



        // 2-



    </script>

</body>

</html>